<!DOCTYPE html>
<html lang="en">
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org" th:style="'background:url(/admin/images/bg/'+@{${pic}}+');no-repeat; background-size: cover;'">-->
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="shortcut icon" href="/resources/blog/image/favicon.ico"/>
    <title>Scaler7 Blog - 用户登录</title>
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/resources/admin/css/style.min.css" rel="stylesheet" type="text/css"/>
    <link href="//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.css" rel="stylesheet"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .panel-shadow {
            -moz-box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
            -webkit-box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
            box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
        }
        .bg-overlay {
            -moz-border-radius: 6px 6px 0 0;
            -webkit-border-radius: 6px 6px 0 0;
            background-color: rgba(47, 51, 62, 0.3);
            border-radius: 6px 6px 0 0;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
        .input-border {b1.png
            font-size: 14px;
            width: 100%;
            height: 40px;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid #dadada;
        }

        .bg-img > h3 {
            text-shadow: 0px 2px 3px #555;
            color: #cac9c8;
        }
    </style>

</head>
<body>
<div style="margin: 0 auto; padding-bottom: 0%; padding-top: 7.5%; width: 380px;">
    <div class="panel panel-color panel-danger panel-pages panel-shadow">
        <div class="panel-heading bg-img">
            <div class="bg-overlay"></div>
            <h3 class="text-center m-t-10"> Login Blog CMS</h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal m-t-20" id="loginForm">
                <div class="form-group">
                    <div class="col-xs-12">
                        <input class=" input-lg input-border" id="username"  name="username" type="text" 
                               placeholder="账号:"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        <input class=" input-lg input-border" id="password"  name="password" type="password"
                               placeholder="密码:"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        <div class="checkbox checkbox-danger">
                            <input id="checkbox-signup" name="remember_me" type="checkbox"/>
                            <label for="checkbox-signup">记住我</label>
                        </div>
                    </div>
                </div>
                <div class="form-group text-center m-t-40">
              </div>
            </form>
            <div class="col-xs-12">
               <button id="submitBtn" class="btn btn-danger btn-lg btn-rounded btn-block w-lg waves-effect waves-light" style="box-shadow: 0px 0px 4px #868282;" type="submit">登&nbsp;录
               </button>
            </div>
        </div>
    </div>
</div>
<!-- Main  -->
<script src="//cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.js"></script>
<script src="/resources//admin/js/base.js"></script>
<script type="text/javascript">

var imgSrcs = [ 
	 "/resources//admin/images/bg/1.png",
	 "/resources//admin/images/bg/2.png",
	 "/resources//admin/images/bg/3.png",
	 "/resources//admin/images/bg/4.png",
	 "/resources//admin/images/bg/5.png"
	 ];
var randomBgIndex = parseInt(Math.random() * (imgSrcs.length));

$(document).ready(
	function() {
		var randomImageUrl = imgSrcs[randomBgIndex];
		//$("body").css("background","url(" + imgSrcs[randomBgIndex] + ");");
		$(document.body).attr('style','background:url(' + randomImageUrl + ');no-repeat; background-size: cover;')
		$(document.documentElement).attr('style','background:url(' + randomImageUrl + ');no-repeat; background-size: cover;')
	});
    /*<![CDATA[*/
    var tale = new $.tale();
    
    
    $("#submitBtn").click(function(){
    	var username = $("#username").val();
    	var password = $("#password").val();
    	if(username == null || username ==''){
    		tale.alertError("账号不得为空!");
    		return false;
    	}
    	if(password == null || password ==''){
    		tale.alertError("密码不得为空!");
    		return false;
    	}
    	 tale.post({
             url: '/admin/login',
             data: $("#loginForm").serialize(),
             success: function (result) {
                 if (result.code == 200) {
                	 window.location.href = '/admin/index';
                 } else {
                     tale.alertError(result.msg);
                 }
             }
         });
    })
    /*]]>*/
</script>
</body>
</html>